<template>
  <div class="layout-fixed">
    <!-- fixed定位的头部 -->
    <header></header>

    <!-- 可以滚动的区域 -->
    <main>
      <!-- 内容在这里... -->
    </main>

    <!-- fixed定位的底部 -->
    <footer :class="{ static: isShow }">
      <input type="text" placeholder="Footer..." />
      <button class="submit">提交</button>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      isShow: false,
      height: window.innerHeight,
      docmHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      isHide: true
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize, false);
  },
  methods: {
    // 一个滑动界面,弹出键盘后,页面无法滑动的问题
    // https://www.cnblogs.com/aloneMing/p/13672959.html
    handleResize() {
      const h = window.innerHeight;
      this.showHeight = document.body.clientHeight;
      this.isHide = this.docmHeight > this.showHeight; // 键盘弹起
      if (this.height !== h) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
header {
  position: fixed;
  height: 50px;
  left: 0;
  right: 0;
  top: 0;
}
footer {
  position: fixed;
  height: 34px;
  left: 0;
  right: 0;
  bottom: 0;
  &.static {
    position: static;
  }
}
main {
  /* main绝对定位，进行内部滚动 */
  position: absolute;
  top: 50px;
  bottom: 34px;
  /* 使之可以滚动 */
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 增加该属性，可以增加弹性 */
  .content {
    height: 2000px;
  }
}
</style>
